"use client";

import { Button, Card, CardBody, CardHeader, Input } from "@nextui-org/react";
import { motion } from "framer-motion";
import Link from "next/link";
import { useState } from "react";
import { FiMail, FiLock, FiPhone, FiBriefcase } from "react-icons/fi";

type IconProps = React.ComponentProps<typeof FiBriefcase>;

export default function Register() {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
    confirmPassword: "",
    company: "",
    phone: "",
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("注册:", formData);
  };

  const formFields = [
    {
      label: "企业名称",
      name: "company",
      type: "text",
      icon: (props: IconProps) => (
        <FiBriefcase size={20} color="var(--nextui-default-400)" {...props} />
      ),
    },
    {
      label: "邮箱",
      name: "email",
      type: "email",
      icon: (props: IconProps) => (
        <FiMail size={20} color="var(--nextui-default-400)" {...props} />
      ),
    },
    {
      label: "手机号码",
      name: "phone",
      type: "tel",
      icon: (props: IconProps) => (
        <FiPhone size={20} color="var(--nextui-default-400)" {...props} />
      ),
    },
    {
      label: "密码",
      name: "password",
      type: "password",
      icon: (props: IconProps) => (
        <FiLock size={20} color="var(--nextui-default-400)" {...props} />
      ),
    },
    {
      label: "确认密码",
      name: "confirmPassword",
      type: "password",
      icon: (props: IconProps) => (
        <FiLock size={20} color="var(--nextui-default-400)" {...props} />
      ),
    },
  ];

  return (
    <div className="min-h-[calc(100vh-140px)] flex items-center justify-center px-4 py-8">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="w-full max-w-md"
      >
        <Card className="bg-white/70 backdrop-blur-md shadow-xl">
          <CardHeader className="flex flex-col gap-1 px-6 pt-6">
            <motion.div
              initial={{ scale: 0.5, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ delay: 0.2 }}
            >
              <h1 className="text-2xl font-bold text-center">创建账号</h1>
              <p className="text-sm text-default-500 text-center">
                注册账号以开始使用我们的服务
              </p>
            </motion.div>
          </CardHeader>
          <CardBody>
            <form onSubmit={handleSubmit} className="flex flex-col gap-4">
              {formFields.map((field, index) => (
                <motion.div
                  key={field.name}
                  initial={{ x: -50, opacity: 0 }}
                  animate={{ x: 0, opacity: 1 }}
                  transition={{ delay: 0.3 + index * 0.1 }}
                >
                  <Input
                    label={field.label}
                    name={field.name}
                    type={field.type}
                    value={formData[field.name as keyof typeof formData]}
                    onChange={handleChange}
                    required
                    startContent={<field.icon className="text-default-400" />}
                  />
                </motion.div>
              ))}
              <motion.div
                initial={{ y: 20, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.8 }}
              >
                <Button
                  color="primary"
                  type="submit"
                  className="w-full mt-2"
                  size="lg"
                >
                  注册
                </Button>
              </motion.div>
              <motion.p
                className="text-center text-sm text-default-500"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.9 }}
              >
                已有账号？{" "}
                <Link href="/login" className="text-primary hover:underline">
                  立即登录
                </Link>
              </motion.p>
            </form>
          </CardBody>
        </Card>
      </motion.div>
    </div>
  );
}
